<script lang="ts" setup>
import type { PlusColumn } from 'plus-pro-components'

import UpdatedOss from '@fl/components/upLoad-oss.vue'

import { typeOptions } from '../constant'

const props = defineProps(['state', 'loading'])

const emits = defineEmits(['close', 'submit', 'updateloading'])
const { loading, state } = toRefs(props)
const columns: PlusColumn[] = [
    {
        label: '分类名称',
        prop: 'name',
        valueType: 'copy',
        width: 120,
    },
    {
        label: '类别',
        options: typeOptions,
        prop: 'type',
        valueType: 'select',
        width: 120,
    },
    {
        label: '适用类别',
        options: [
            {

                label: '企业',
                value: '0',
            },
            {
                label: '个人',
                value: '1',
            },

        ],
        prop: 'userType',
        valueType: 'select',
        width: 120,
    },
    {
        fieldProps: {
            autosize: { maxRows: 4, minRows: 2 },
        },
        label: '目标客户',
        prop: 'customer',
        valueType: 'textarea',
    },
    {
        fieldProps: {
            autosize: { maxRows: 4, minRows: 2 },
        },
        label: '申请条件',
        prop: 'apply',
        valueType: 'textarea',
    },
    {
        fieldProps: {
            autosize: { maxRows: 4, minRows: 2 },
        },
        label: '分类说明',
        prop: 'info',
        valueType: 'textarea',
    },
    {
        label: '分类示意图',
        prop: 'img',
    },
]

const rules = {
    apply: [
        {
            message: '请输入申请条件',
            required: true,
        },
    ],
    customer: [
        {
            message: '请输入目标客户',
            required: true,
        },
    ],
    name: [
        {
            message: '请输入分类名称',
            required: true,
        },
    ],
    type: [
        {
            message: '请选择类别',
            required: true,
        },
    ],
    userType: [
        {
            message: '请选择适用类别',
            required: true,
        },
    ],
}

function mySubmit() {
    emits('submit')
}
</script>

<template>
    <el-card>
        <PlusForm v-model="state"
                  :columns="columns"
                  :rules="rules"
                  label-width="100"
                  @submit="mySubmit"
        >
            <template #plus-field-img>
                <UpdatedOss v-model="state.img"
                            accept=".png,.jpg,.jpeg"
                            :size="200"
                            @success="emits('updateloading', false)"
                            @before-upload="emits('updateloading', true)"
                />
            </template>

            <template #footer="{ handleSubmit }">
                <div style="margin: 0 auto">
                    <el-button @click="emits('close')">
                        返回
                    </el-button>

                    <el-button type="primary"
                               :loading="loading"
                               @click="handleSubmit"
                    >
                        提交
                    </el-button>
                </div>
            </template>
        </PlusForm>
    </el-card>
</template>
